import React, { PureComponent } from 'react';
import { Row, Col, Card, Tooltip, message, Avatar, Tag, Icon, Popconfirm, Spin} from 'antd';
// import ChartCard from '@/components/Charts/ChartCard/index';
import Radar from '@/components/Charts/Radar/index';
import styles from './detail.less';
import { connect } from 'dva';
import AddTag from './addTag';
import EditRemark from './editRemark';
import AddCard from './addCard';
import ChangePoints from './changePoints';
import AddCoupon from './addCoupon';
const { Meta } = Card;

@connect (({global, customerList}) => ({
  oemInfo: global.oemInfo,
  memberInfo: customerList.memberInfo
}))
class DetailMember extends PureComponent {
  constructor() {
    super();
    this.state ={
      sourceData: {},
      loading: true,
    }
  }

  componentWillMount() {
    window.Isoption = false;
    this.findMemberInfoById();
  }
  componentDidMount() {
    window.Isoption = true;
  }

  findMemberInfoById =() => {
    const { dispatch, match} = this.props;
    dispatch({
      type: 'customerList/FindMemberInfoById',
      payload: {
        Id: match.params.id/1
      },
      callback: {
        success: res => {
          if(res.Code ===0) {
            this.setState({
              sourceData: res.Data,
              loading: false
            })
          }
        },
        error: res=> {
          message.error(res.Msg);
        }
      }
    })
  }

    //刷新页面
    clickrefrech = () => {
        this.setState({
            loading: true
        }, () => {
            this.findMemberInfoById();
        })
    }

  // 删除
  deleteTag =(id) => {
    const {dispatch, match} = this.props;
    dispatch({
        type: 'customerList/DelMemberTag',
        payload: {
            MemberId: match.params.id/1,
            TagId: id
        },
        callback: {
            success: res => {
                if (res.Code == 0) {
                  message.success('已删除');
                  this.setState({
                      loading: true
                  })
                  this.findMemberInfoById();
                }
            },
        }
    })
  }


    render() {
      const {oemInfo}= this.props;
      const  {sourceData, loading} = this.state;
      const Source = ['其他','小程序'];
      const data1 = sourceData.ConsumeRadar && sourceData.ConsumeRadar.Series.Data[0];
      const data2 = sourceData.ConsumeRadar && sourceData.ConsumeRadar.Series.Data[1];
      const cardImg = "xkdnewyun/systemfile/store/customer_detail_card.png";
      const quanImg = "xkdnewyun/systemfile/store/customer_detail_quan.png";
      const jifenImg = "xkdnewyun/systemfile/store/customer_detail_jifen.png";
      const radarOriginData = [
        {
          name: data1?data1.Name: '',
          ref: data1?data1.Value[0]:'',
          koubei:  data1?data1.Value[1]:'',
          output:  data1?data1.Value[2]:'',
          contribute: data1?data1.Value[3]:'',
          hot:  data1?data1.Value[4]:'',
        },
        {
          name: data2?data2.Name: '',
          ref: data2?data2.Value[0]:'',
          koubei:  data2?data2.Value[1]:'',
          output:  data2?data2.Value[2]:'',
          contribute: data2?data2.Value[3]:'',
          hot:  data2?data2.Value[4]:'',
        },
      ];
      const radarData = [];

      const radarTitleMap = {
        ref: '消费金额',
        koubei: '客单价',
        output: '累计退款金额',
        contribute: '累计退款单数',
        hot: '消费次数',
      };

      radarOriginData.forEach((item) => {
        Object.keys(item).forEach((key) => {
          if (key !== 'name') {
            radarData.push({
              name: item.name,
              label: radarTitleMap[key],
              value: item[key],
            });
          }
        });
      });

        return (
            <Spin spinning={loading}>
               <div className={styles.detailContent} >
                <Row gutter={16}>
                    <Col span={16}  style={{ marginBottom: 24 }}>
                        <div>
                            <div className={styles.headImgUrl}>
                              <img src={sourceData.HeadImgUrl}/>
                              <div>{sourceData.NickName}</div>
                            </div>
                            <div className={styles.headRow}>
                              <div className={styles.item}>
                                <div>客户来源</div>
                                <div>{Source[sourceData.Source]}</div>
                              </div>
                              <div className={styles.item}>
                                <div>备注名  <a onClick= {
                                    () => {
                                        const title="修改备注名";
                                        const MemberId = sourceData.Id;
                                        const Remark = sourceData.Remark;
                                        const width =320;
                                        this.editRemark.show({width, title, MemberId, Remark}, this.clickrefrech)
                                    }
                                }>修改</a></div>
                                <div>{sourceData.Remark}</div>
                              </div>
                              <div className={styles.item}>
                                <div>成为客户时间</div>
                                <div>{sourceData.CreateTime}</div>
                              </div>
                              <div className={styles.items}>
                                <div>客户编号</div>
                                <div>{sourceData.CustomerNo}</div>
                              </div>
                            </div>
                        </div>
                    </Col>
                    <Col span={8}>
                        <Card
                            title="卡券积分"
                            style={{ marginBottom: 24 }}
                            bodyStyle={{ textAlign: 'center' }}
                            bordered={false}
                            className={styles.rightCard}
                        >
                          <div className={styles.headRight}>
                            <Meta
                              avatar={
                                <Avatar
                                    src={oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + cardImg +'?x-oss-process=style/240':''}
                                />
                            }
                              title="可用会员卡数"
                              description={<a onClick={
                                  () => {
                                    const title="管理卡";
                                    const MemberId = sourceData.Id;
                                    const width =320;
                                    this.addCard.show({width, title, MemberId}, this.clickrefrech)
                                  }
                              }>管理卡</a>}
                            />
                            <div className={styles.headRightNum}>{sourceData.TotalCardNum}</div>
                          </div>
                          <div className={styles.headRight}>
                            <Meta
                              avatar={
                                <Avatar
                                    src={oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + quanImg +'?x-oss-process=style/240':''}
                                />
                            }
                              title="可用优惠券"
                              description={<a onClick={
                                  () => {
                                    const title="选择优惠券";
                                    const width = 960;
                                    // this.addCoupon.show({width, title}, this.clickrefrech); //
                                  }
                              }
                              
                              >送优惠券</a>}
                            />
                            <div className={styles.headRightNum}>{sourceData.TotalCouponNum}</div>
                          </div>
                          <div className={styles.headRight}>
                            <Meta
                              avatar={
                                <Avatar
                                src={oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + jifenImg +'?x-oss-process=style/240':''}
                                />
                            }
                              title="可用积分"
                              description={<a onClick={
                                () => {
                                    const title="修改积分";
                                    const MemberId = sourceData.Id;
                                    const width = 640;
                                    this.changePoints.show({width, title, MemberId}, this.clickrefrech)
                                }
                              }>修改积分</a>}
                            />
                            <div className={styles.headRightNum}>{sourceData.TotalPoints}</div>
                          </div>
                        </Card>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={8} >
                            <Card
                                title="用户标签"
                                style={{ marginBottom: 24 }}
                                extra={<span>更多标签</span>}
                                bodyStyle={{ textAlign: 'center' }}
                                bordered={false}
                                className={styles.leftBottonCard}
                            >
                                <Tag
                                    onClick={
                                        () => {
                                            const title="选择标签";
                                            const MemberId = sourceData.Id;
                                            const width = 640;
                                            this.addTag.show({width, title, MemberId}, this.clickrefrech)
                                        }
                                    }
                                    className={styles.tagAdd}
                                >
                                        <Icon type="plus" />标签
                                </Tag>
                                <Tag>注册客户</Tag>
                                {sourceData.Tags && sourceData.Tags.map((tag, index) => {
                                    if (tag.TagType == 1) {
                                        return (
                                            <Popconfirm
                                                title={(
                                                <div>
                                                    确定删除?<br/>
                                                </div>
                                                )}
                                                onConfirm={() => this.deleteTag(tag.Id)}
                                                okText="确定"
                                                cancelText="取消"
                                                key={index}
                                            >
                                                <Tag key={tag.Id}>
                                                    {tag.Name}
                                                    <Icon type="close" />
                                                </Tag>
                                            </Popconfirm>
                                        );
                                        } else {
                                        return <Tag key={tag.Id}>{tag.Name}</Tag>;
                                  }
                                })}
                            </Card>
                    </Col>
                    <Col span={16}  style={{ marginBottom: 24 }}>
                        <Card title="消费信息" bordered={false}>
                            <Radar
                              hasLegend
                              height={286}
                              data={radarData?radarData:[]}
                              time={sourceData.LastBuyTime}
                            />
                        </Card>
                    </Col>
                </Row>
                <AddTag
                    ref={e => {
                        this.addTag = e;
                    }}
                />

                  <EditRemark
                    ref={e => {
                        this.editRemark = e;
                   }}
                  />
                  <AddCard
                    ref={e => {
                        this.addCard = e;
                   }}
                  />
                  <ChangePoints
                     ref={e => {
                         this.changePoints = e;
                     }}
                  />
                  <AddCoupon
                    ref={e=> {
                        this.addCoupon =e;
                    }}
                  />
            </div>
            </Spin>

        )
    }
}

export default DetailMember;
